#index {
    color: #d3d6dd;
    background-color: #000000;
    width: 100%;
    height: 100%;
    .title{
        font-size: 0.3rem;
        text-align: center;
        font-weight:bold;
        .title-text {
            // font-size: 0.3rem;
            text-align: center;
        }
        .title-bototm{
            text-align: left;
        }
    }
    .d-flex{
        font-size: 0.2rem;
    }
    .bg {
        padding: 0.2rem 0.2rem 0 0.2rem;
        background-image: url("../assets/pageBg.png");
        background-size: cover;
        background-position: center center;
        //-webkit-filter: contrast(30);
        //filter: contrast(30);
    }
    .c1 {
        font-size: 0.2rem;
        position: absolute;
        width: 50%;
        height: 53%;
        top: 10%;
        left: 25%;
        //background: #555555;
        padding: 0.2rem;
    }
    .num {
        width: 25%;
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        color: gold;
        font-size: 0.25rem;
    }
    .txt {
        font-size: 0.225rem;
        width: 25%;
        float: left;
        font-family: "幼圆";
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.25rem;
        color: white;
    }
    .c2 {
        font-size: 0.225rem;
        position: absolute;
        width: 50%;
        height: 37%;
        top: 63%;
        left: 25%;
        padding: 0.2rem;
        // background: #999999;
    }
    .l1 {
        font-size: 0.225rem;
        position: absolute;
        width: 25%;
        height: 30%;
        top: 10%;
        left: 0%;
        // background: #666666;
        padding: 0.2rem;
    }
    .l2 {
        font-size: 0.225rem;
        position: absolute;
        width: 25%;
        height: 30%;
        top: 40%;
        left: 0%;
        //background: #777777;
        padding: 0.2rem;
    }
    .l3 {
        font-size: 0.225rem;
        position: absolute;
        width: 25%;
        height: 30%;
        top: 70%;
        left: 0%;
        // background: #888888;
        padding: 0.2rem;
    }
    .r1 {
        font-size: 0.225rem;
        position: absolute;
        width: 25%;
        height: 22.5%;
        top: 10%;
        right: 0%;
        padding: 0.2rem;
    }
    .r2 {
        font-size: 0.225rem;
        position: absolute;
        width: 25%;
        height: 22.5%;
        top: 32.5%;
        right: 0%;
        // background: #333333;
        padding: 0.2rem;
    }
    .r3 {
        font-size: 0.225rem;
        position: absolute;
        width: 25%;
        height: 22.5%;
        top: 55%;
        right: 0%;
        // background: #222222;
        padding: 0.2rem;
    }
    .r4 {
        font-size: 0.225rem;
        position: absolute;
        width: 25%;
        height: 22.5%;
        top: 77.5%;
        right: 0%;
        // background: #111111;
        padding: 0.2rem;
    }
    // .host-body {
    //     .title {
    //         position: relative;
    //         width: 10rem;
    //         //width: 6.25rem;
    //         text-align: center;
    //         background-size: cover;
    //         background-repeat: no-repeat;
    //         .title-text {
    //             font-size: 0.3rem;
    //             position: absolute;
    //             width: 25%;
    //             height: 30%;
    //             top: 10%;
    //             left: 0%;
    //             background: #666666;
    //         }
    //         .l2 {
    //             position: absolute;
    //             width: 25%;
    //             height: 30%;
    //             top: 40%;
    //             left: 0%;
    //             background: #777777;
    //         }
    //         .l3 {
    //             position: absolute;
    //             width: 25%;
    //             height: 30%;
    //             top: 70%;
    //             left: 0%;
    //             background: #888888;
    //         }
    //         .r1 {
    //             position: absolute;
    //             width: 25%;
    //             height: 45%;
    //             top: 10%;
    //             right: 0%;
    //         }
    //         .r2 {
    //             position: absolute;
    //             width: 25%;
    //             height: 45%;
    //             top: 32.5%;
    //             right: 0%;
    //             // background: #333333;
    //         }
    //         .r3 {
    //             position: absolute;
    //             width: 25%;
    //             height: 45%;
    //             top: 55%;
    //             right: 0%;
    //             // background: #222222;
    //         }
    //         .r4 {
    //             position: absolute;
    //             width: 25%;
    //             height: 45%;
    //             top: 77.5%;
    //             right: 0%;
    //             // background: #111111;
    //         }
    //         .host-body {
    //             .title {
    //                 position: relative;
    //                 width: 10rem;
    //                 //width: 6.25rem;
    //                 text-align: center;
    //                 background-size: cover;
    //                 background-repeat: no-repeat;
    //                 .title-text {
    //                     font-size: 0.3rem;
    //                     position: absolute;
    //                     width: 25%;
    //                     height: 30%;
    //                     top: 10%;
    //                     left: 0%;
    //                     background: #666666;
    //                 }
    //                 .l2 {
    //                     position: absolute;
    //                     width: 25%;
    //                     height: 30%;
    //                     top: 40%;
    //                     left: 0%;
    //                     background: #777777;
    //                 }
    //                 .l3 {
    //                     position: absolute;
    //                     width: 25%;
    //                     height: 30%;
    //                     top: 70%;
    //                     left: 0%;
    //                     background: #888888;
    //                 }
    //                 .r1 {
    //                     position: absolute;
    //                     width: 25%;
    //                     height: 45%;
    //                     top: 10%;
    //                     right: 0%;
    //                     // background: #444444;
    //                 }
    //                 .r2 {
    //                     position: absolute;
    //                     width: 25%;
    //                     height: 45%;
    //                     top: 32.5%;
    //                     right: 0%;
    //                     // background: #333333;
    //                 }
    //                 .r3 {
    //                     position: absolute;
    //                     width: 25%;
    //                     height: 45%;
    //                     top: 55%;
    //                     right: 0%;
    //                     // background: #222222;
    //                 }
    //                 .r4 {
    //                     position: absolute;
    //                     width: 25%;
    //                     height: 45%;
    //                     top: 77.5%;
    //                     right: 0%;
    //                     // background: #111111;
    //                 }
    //                 .host-body {
    //                     .title {
    //                         position: relative;
    //                         width: 10rem;
    //                         //width: 6.25rem;
    //                         text-align: center;
    //                         background-size: cover;
    //                         background-repeat: no-repeat;
    //                         .title-text {
    //                             font-size: 0.3rem;
    //                             position: absolute;
    //                             bottom: 0;
    //                             left: 50%;
    //                             transform: translate(-50%);
    //                         }
    //                         .title-bototm {
    //                             position: absolute;
    //                             bottom: -0.375rem;
    //                             left: 50%;
    //                             transform: translate(-50%);
    //                         }
    //                     }
    //                     // 平行四边形
    //                     .react-left {
    //                         cursor: pointer;
    //                         font-size: 0.225rem;
    //                         width: 3.75rem;
    //                         height: 0.625rem;
    //                         line-height: 0.625rem;
    //                         text-align: center;
    //                         transform: skewX(-45deg);
    //                         .react-after {
    //                             position: absolute;
    //                             right: -0.3125rem;
    //                             top: 0;
    //                             height: 0.625rem;
    //                             width: 0.625rem;
    //                             background-color: #0f1325;
    //                             transform: skewX(45deg);
    //                         }
    //                         .text {
    //                             display: inline-block;
    //                             transform: skewX(45deg);
    //                         }
    //                     }
    //                     .react-right {
    //                         cursor: pointer;
    //                         font-size: 0.225rem;
    //                         width: 3.75rem;
    //                         height: 0.625rem;
    //                         line-height: 0.625rem;
    //                         text-align: center;
    //                         transform: skewX(45deg);
    //                         .react-before {
    //                             position: absolute;
    //                             left: -0.3125rem;
    //                             top: 0;
    //                             height: 0.625rem;
    //                             width: 0.625rem;
    //                             background-color: #0f1325;
    //                             transform: skewX(-45deg); //斜45°
    //                         }
    //                         .text {
    //                             display: inline-block;
    //                             transform: skewX(-45deg);
    //                         }
    //                     }
    //                     .body-box {
    //                         margin-top: 0.2rem;
    //                         display: flex;
    //                         flex-direction: column;
    //                         //下方区域的布局
    //                         .content-box {
    //                             display: grid;
    //                             grid-template-columns: 1fr 2fr 1fr;
    //                         }
    //                     }
    //                 }
    //             }
    //         }
    //     }
    // }
}